<script setup lang="js">
import {ref} from 'vue';
import {post} from '../utils/axios-request.js'
import router from '../router.js'
import {ElNotification} from "element-plus";

const username = ref('');
const password = ref('');

const login = () => {
  post('/pdf/admin/login', {username: username.value, password: password.value}, (token) => {
    localStorage.setItem('token', token);
    ElNotification({
      title: 'Success',
      message: '登录成功！',
      type: 'success',
      duration: 1000,
      onClose: () => {
        router.push('/artwork/list');
      }
    })
  });
}
</script>
<template>
  <div class="flex flex-wrap gap-4 login-box">
    <el-form label-width="auto" style="max-width: 500px;">
      <h1>您好，欢迎登录</h1>
      <el-form-item label="用户名">
        <el-input v-model="username" placeholder="请输入用户名"/>
      </el-form-item>
      <el-form-item label="密码">
        <el-input
            v-model="password"
            type="password"
            placeholder="请输入密码"
            show-password
        />
      </el-form-item>
      <div class="button-div">
        <el-button class="large-button"
                   plain
                   @click="login"
                   size="large"
                   type="primary">
          登录
        </el-button>
      </div>
    </el-form>
  </div>
</template>
<style scoped>
.login-box {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中（可选） */
  height: 100vh; /* 让容器占满整个视口高度（可选） */
}

.large-button {
  width: 400px;
}

.button-div {
  /* 使用 Flexbox 让按钮居中 */
  display: flex;
  justify-content: center; /* 水平居中 */
  gap: 10px; /* 按钮之间的间距 */
}
h1 {
  font-weight: 200;
  font-size: 2rem;
}
</style>
